---
title: Eigene Schriftarten verwenden
description: >-
  Möchtest du einem Astro-Projekt einige benutzerdefinierte Schriftarten
  hinzufügen? Verwende dafür Google Fonts mit Fontsource oder füge eine
  Schriftart deiner Wahl hinzu.
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';


Astro unterstützt alle gängigen Möglichkeiten zum Hinzufügen benutzerdefinierter Schriftarten zu deinem Website-Design. Diese Anleitung zeigt zwei verschiedene Möglichkeiten, Webfonts in dein Projekt einzubinden.

## Verwenden einer lokalen Schriftdatei

Nehmen wir an, du hast eine Schriftdatei namens `DistantGalaxy.woff`.

1. Platziere die Schriftdatei im `public/fonts/`-Verzeichnis.

2. Füge deinem CSS-Code eine `@font-face`-Regel hinzu. Du kannst dazu entweder eine global importierte `.css`-Datei verwenden, oder sie in einem `<style>`-Block innerhalb des Layouts oder der Komponente platzieren, in der du die Schriftart verwenden möchtest.

    ```css
    /* Registriere deine benutzerdefinierte Schriftart und teile dem Browser mit, wo sie zu finden ist. */
    @font-face {
      font-family: 'DistantGalaxy';
      src: url('/fonts/DistantGalaxy.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    ```

    :::note
    Wir lassen `public` bei der Quell-URL der Schriftart weg, denn alle Dateien im `public`-Verzeichnis werden dem Stammverzeichnis deiner Website hinzugefügt.
    :::

3. Benutze den `font-family`-Wert aus deiner `@font-face`-Regel, um Elemente innerhalb deiner Komponente oder deines Layouts zu gestalten. Im folgenden Beispiel wird die benutzerdefinierte Schriftart auf das `<h1>`-Element angewendet, aber nicht auf den Absatz `<p>`.

    ```astro {10-12}
    ---
    // src/pages/example.astro
    ---

    <h1>In einer Galaxie weit, weit entfernt...</h1>

    <p>Benutzerdefinierte Schriftarten machen meine Überschriften viel cooler!</p>

    <style>
    h1 {
      font-family: 'DistantGalaxy', sans-serif;
    }
    </style>
    ```

## Verwenden von Fontsource

Das [Fontsource](https://fontsource.org/)-Projekt ermöglicht die Verwendung von Google Fonts und anderen Open Source-Schriftarten. Es stellt npm-Pakete bereit, um die gewünschten Schriftarten zu installieren.

1. Finde die Schriftart, die du benutzen möchtest, im [Fontsource-Katalog](https://fontsource.org/fonts). Für dieses Beispiel werden wir [Twinkle Star](https://fontsource.org/fonts/twinkle-star) nutzen.

2. Installiere das Paket deiner gewählten Schriftart.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add @fontsource/twinkle-star
      ```
      </Fragment>
    </PackageManagerTabs>

    :::tip
    Du findest den korrekten Paketnamen im Abschnitt "Quick Installation" jeder Schriftarten-Seite auf der Fontsource-Website. Er beginnt immer mit `@fontsource/`, gefolgt vom Namen der Schriftart.
    :::

3. Importiere das Schriftarten-Paket in dein Layout oder die Komponente, in der du es benutzen möchtest. Normalerweise solltest du dies in einer gemeinsamen Layoutkomponente tun, um sicherzustellen, dass die Schriftart überall auf deiner Website verfügbar ist.

    Der Import fügt automatisch die erforderliche `@font-face`-Regel hinzu, die zum Einrichten der Schriftart benötigt wird.

    ```astro
    ---
    // src/layouts/BaseLayout.astro
    import '@fontsource/twinkle-star';
    ---
    ```

4. Benutze die `font-family`-Eigenschaft so, wie es auf der jeweiligen Schriftarten-Seite der Fontsource-Website beschrieben ist. Du kannst sie überall dort verwenden, wo du CSS-Code in deinem Astro-Projekt schreiben kannst.

    ```css
    h1 {
      font-family: "Twinkle Star", cursive;
    }
    ```

## Schriftarten mit Tailwind hinzufügen

Falls du die [Tailwind-Integration](/de/guides/integrations-guide/tailwind/) verwendest, kannst du entweder eine [`@font-face`-Regel für eine lokale Schriftart](#verwenden-einer-lokalen-schriftdatei) hinzufügen oder die [`Import`-Strategie von Fontsource](#verwenden-von-fontsource) verwenden, um die Schriftart zu registrieren.

Um deine Schriftart in Tailwind zu registrieren:

1. Folge einer der Anleitungen oben, lasse aber den Schritt, die `font-family` in deinem CSS-Code hinzuzufügen, aus.
2. Füge den Schriftartnamen in der `tailwind.config.mjs` Datei hinzu.

  Dieses Beispiel ergänzt die Serifenlose-Schriftfamilie um `Inter`, mit Standard-Ersatzschriftarten von Tailwind CSS.

  ```js title="tailwind.config.mjs" ins={1,8-10}
  import defaultTheme from 'tailwindcss/defaultTheme'

  /** @type {import('tailwindcss').Config} */
  export default {
    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    theme: {
      extend: {
        fontFamily: {
          sans: ['Inter', ...defaultTheme.fontFamily.sans],
        },
      },
    },
    plugins: [],
  }
  ```

  Durch diese Änderung wird der gesamte serifenlose Text (der Standard mit Tailwind) deines Projekts die von dir ausgewählte Schriftart verwenden. Die `font-sans` Klasse verwendet auch die Inter Schriftart.

Für mehr Informationen, folge [Tailwinds Dokumentation zum Hinzufügen benutzerdefinierter Schriftfamilien](https://tailwindcss.com/docs/font-family#using-custom-values).

## Weitere Ressourcen

- Erfahre, wie Web-Schriftarten funktionieren: Die [Web Fonts-Anleitung von MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts) bietet eine Einführung in das Thema.

- Generiere CSS für deine Schriftart mit dem [Font Squirrel Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator).
